<template>
    <ul>
        <li :class="{active:item.isCompleted}" v-for="(item,index) in data" :key="item.id">
            <input type="checkbox" id="" :checked="item.isCompleted" @change="checkChange(item,$event)">
            <b>{{item.todo}}</b>
            <button @click="handleDel(index)">删除</button>
        </li>
    </ul>
    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
</template>
<script setup>
import {defineProps,toRefs,defineEmits} from 'vue'
//定义props接收data
let props=defineProps(["data","allCount","completedCount","activeCount"])

let {data,allCount,completedCount,activeCount}=toRefs(props)
let emit=defineEmits(["del",'getFlag'])
let handleDel=(index)=>{
    emit("del",index)
}
let checkChange=(item,e)=>{
    //拿到input:checkbox元素的勾选状态
    item.isCompleted=e.target.checked
}
//声明一个筛选todo的方法
let filter=flag=>{
    emit('getFlag',flag)
}
</script>
<style>
.active{
   background-color: pink;
}
</style>